<template>
  <view class="page">
		<view class="top">
			<input
				type="text"
				v-model="sPalletNo"
				:disabled="list.length !== 0"
				placeholder="请输入托盘"
			/>	
		</view>
		
		<view class="top">
			<input
				:focus="isInputFocus"
				type="text"
				v-model="sBarCode"
				placeholder="请扫描条码"
				@blur="onblur"
				@input="replaceInput()"
			/>
			<uni-icons
				class="icon"
				type="scan"
				size="30"
				@click="scanQRCode"
			/>
		</view>
		<view class="fav">
			<uni-fav :star="false" @click="onClick(0)" bgColorChecked="#000" :checked="checkList[0]" :contentText="{contentDefault: '表格',contentFav: '表格'}" />
			<uni-fav :star="false" @click="onClick(1)" bgColorChecked="#000" :checked="checkList[1]" :contentText="{contentDefault: '列表',contentFav: '列表'}" />
			<uni-fav :star="false" @click="onClick(2)" bgColorChecked="#000" :checked="checkList[2]" :contentText="{contentDefault: '图片',contentFav: '图片'}" />
		</view>
		<view class="table" v-if="checkList[0]">
			<uni-table border stripe emptyText="暂无更多数据" >
				<uni-tr>
					<uni-th align="center" width="90" v-for="item in captionList">{{ item.sCaption }}</uni-th>
				</uni-tr>
				<uni-tr v-for="(col, index) in list"  @click="editNum(col, index)">
					<uni-td align="center" v-for="item in captionList"> {{ col[item.sKey] }} </uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="table" v-if="checkList[1]">
			<uni-swipe-action ref="swipeActionRef">
				<uni-swipe-action-item
					:right-options="options"
					v-for="(col, index) in list"
					:key="index"
					class="action-item"
					@click="onDelClick(index)"
				>
					<view class="table-item" @click="editNum(col, index)">
						<view class="caption-box">
							<view class="caption-item" v-for="item in captionList">
								<view class="name">{{ item.sCaption }}：</view>
								<view class="">{{ col[item.sKey] }} </view>
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<view class="img" v-if="checkList[2]">
			<view class="img-text">信息集:</view>
			<jp-image-upload v-model="picUrl" :disabled="false"></jp-image-upload>
		</view>
		
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog
				ref="inputClose"
				mode="input"
				title="修改数量"
				value="对话框预置提示内容!"
				placeholder="请输入新数量"
				@confirm="dialogInputConfirm">
			</uni-popup-dialog>
		</uni-popup>
		
		<view class="fixed-btn">
			<view class="num">总数：{{ allNum }}</view>
			<button class="submit-btn" @click="save">确定</button>
		</view>
	</view>
	

</template>

<script>
	import { sum } from "lodash";
	import fabricService from "@/api/auth/fabricService";
	export default {
		data() {
			return {
				sBarCode: "",
				sPalletNo: "",
				picUrl: "",
				sTypeCode: "",
				timer: null,
				list: [],
				isInputFocus: false,
				captionList: [],
				checkList: [true, false, false],
				userInfo: {},
				editIndex: 0,
				colors: ['#ffb34b', '#f2bba9', '#f7a196', '#f18080', '#88a867', '#bfbf39', '#89c152', '#94d554', '#f19ec2',
					'#afaae4', '#e1b0df', '#c38cc1', '#72dcdc', '#9acdcb', '#77b1cc', '#448aca', '#86cefa', '#98d1ee',
					'#73d1f1', '#80a7dc', '#83a78d', '#ad9e5f'
				],
				pattern: {
					"buttonColor": "#111"
				},
				allNum: 0,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			}
		},
		onLoad(option) {
			const userInfo = uni.getStorageSync('userInfo');
			this.userInfo = userInfo;
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('sendData', (data) => {
				uni.setNavigationBarTitle({
					title: data.sTypeName
				});
				const params = {
					type: data.sTypeCode
				};
				this.sTypeCode = data.sTypeCode;
				fabricService.getCardCaptionList(params).then(res => {
					this.captionList = res;
				})
			});
		},
		methods: {
			onClick(index) {
				this.checkList = [false, false, false];
				this.checkList[index] = !this.checkList[index];
				this.$forceUpdate();
			},
			onblur() {
				this.isInputFocus = false;
			},
			replaceInput() {
				if(this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					this.getInitData();
					this.timer = null;
				},1000);
			},
			getInitData() {
				if (this.sBarCode.trim() === "" || this.sPalletNo.trim() === "") {
					uni.showToast({
						title: "请扫描",
						duration: 2000,
						icon: "error"
					});
					return false;
				};
				// 不允许重复入库
				const findItem = this.list.find(f => {
					return f.sbar_code === this.sBarCode
				})
				if (findItem !== undefined) {
					uni.showToast({
						title: "已扫",
						icon: "error"
					})
					return false
				}
				uni.showLoading({
					title: '加载中'
				});
				const params = {
					sTypeCode: this.sTypeCode,
					sBarCode: this.sBarCode,
					sPalletNo: this.sPalletNo,
					sUserNo: this.userInfo.id
				};
				fabricService.list(params).then(res => {
					if (res[0].sReturnMessage !== "ok") {
						uni.showToast({
							title: res[0].sReturnMessage,
							icon: "error"
						})
						return false;
					};
					res[0].sPalletNo = this.sPalletNo || '';
					this.list.unshift(res[0]);
					this.returnAllNum();
					this.sBarCode = '';
					uni.hideLoading();
					this.isInputFocus = true;
				}).catch(error => {
					uni.hideLoading();
				})
			},
			// 修改数量
			editNum(col, index) {
				this.editIndex = index;
				this.$refs.inputDialog.open();
			},
			dialogInputConfirm(val) {
				this.list[this.editIndex].nQty = val;
				this.returnAllNum();
				this.$refs.inputDialog.close();
			},
			scanQRCode() {
				this.sBarCode = ";"
				uni.scanCode({
					success: (res) => {
						this.sBarCode = res.result;
						if(this.timer) {
							clearTimeout(this.timer);
						}
						uni.showLoading({
							title: '加载中'
						});
						this.timer = setTimeout(() => {
							this.getInitData();
							this.timer = null;
						}, 1000)
					},
					fail: (err) => {
						uni.showToast({
							title: "无效条码",
							duration: 2000,
							icon: "error"
						});
					}
				});
			},
			returnAllNum() {
				this.allNum = sum(this.list.map(item => Number(item.nQty) || 0));
			},
			onDelClick(index) {
				const _this = this;
				uni.showModal({
					title: '提示',
					content: '确认删除',
					success: function (res) {
						if (res.confirm) {
							_this.list.splice(index, 1);
							_this.returnAllNum();
							_this.$refs.swipeActionRef.closeAll();
						} else if (res.cancel) {
							_this.$refs.swipeActionRef.closeAll();
						}
					}
				});
			},
			save() {
				uni.showLoading();
				const picUrl = this.picUrl
				const result = this.list.map(item => ({...item, picUrl}));
				const data = JSON.parse(JSON.stringify(result))
				fabricService.save(data).then(res => {
					if (res === "ok") {
						uni.showToast({
							title: "成功",
						});
						setTimeout(() => {
							uni.hideLoading();
							uni.navigateBack();
						}, 300);
					} else {
						uni.showToast({
							title: res,
							duration: 2000,
							icon: "error"
						});
						setTimeout(() => {
							uni.hideLoading();
						}, 300);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.page {
	padding-bottom: 260rpx;
	padding-top: 20rpx;
	width: 710rpx;
	margin: 0 auto;
}

.top {
	width: 710rpx;
	margin: 0 auto;
	height: 100rpx;
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	position: relative;
	text {
		color: black;
		font-size: 16px;
		width: 100rpx;
	}
	input {
		flex: 1;
		height: 100rpx;
		background-color: rgb(248, 248, 248);
		padding-left: 30rpx;
	}
}

.action-item {
	// color: white;
	background-color:  rgb(240, 240, 240);
	margin-bottom: 20rpx;
	border-radius: 8rpx;
	font-weight: bold;
	font-size: 14px;
	.name {
		font-weight: normal;
	}
}

.table {
	width: 710rpx;
	margin-top: 20rpx;
	.table-item {
		min-height: 160rpx;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		.caption-box {
			display: flex;
			flex-wrap: wrap;
			.caption-item {
				width: 50%;
				display: flex;
				align-items: center;
				margin-top: 10rpx;
			}
		}
	}
}
.img {
	width: 710rpx;
	margin-top: 20rpx;
	.img-text{
		font-size: 14px;
		font-weight: normal;
	}
}

.fixed-btn {
	position: fixed;
	height: 80rpx;
	width: 710rpx;
	bottom: 10rpx;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	justify-content: space-between;
	.submit-btn {
		width: 190rpx;
		height: 80rpx;
		background: rgb(17, 17, 17);
		border-radius: 10rpx;
		color: white;
		line-height: 80rpx;
		font-size: 24rpx;
		margin: 0;
	}
}

.bottom {
	position: fixed;
	bottom: 0;
	width: 710rpx;
	height: 260rpx;
	.num {
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.btn {
		display: flex;
		justify-content: space-around;
		button {
			flex: 1;
			margin: 0 20rpx;
			margin-top: 10px;
			width: 340rpx;
			height: 80rpx;
			background: rgb(17, 17, 17);
			border-radius: 10rpx;
			color: white;
			line-height: 80rpx;
			font-size: 24rpx
		}
		.del {
			background-color: #e43d33;
		}
	}
}

.icon {
	position: absolute;
	right: 0;
}

.fav {
	display: flex;
	justify-content: flex-end;
}
</style>